/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-03-30 15:14:11
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-11 14:58:43
 */
import React,{ useState } from 'react';
import { Table, Space,Button,ConfigProvider,Select,Input,Pagination  } from 'antd';
import { FormOutlined,DeleteTwoTone,DeleteOutlined } from '@ant-design/icons';
// 引入国际化 默认中文文案
import zhCN from 'antd/lib/locale/zh_CN';

// 引入修改模态框
import ModalApp from '../../components/goods/modal/Modal';
// 引入删除模态框
import DeleteModal from '../../components/goods/deleteModal/Delete'

// 引入商品分类模态框
import GoodsCategory from '../../components/goods/goodsCategory/GoodsCategory';
import GoodsImport from '../../components/goods/goodsImport/GoodsImport';

// 选择器 option 选项标签
const { Option } = Select;




const rowSelection = {
  // onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
  //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  // },
  // getCheckboxProps: (record: DataType) => ({
  //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
  //   name: record.name,
  // }),
};

// select下拉框 数据

const provinceData = ['请选择','产品大分类', '体育','电竞','电子','测试'];
const cityData = {
  请选择: [],
  产品大分类: ['子分类'],
  体育: ['篮球', '足球'],
  电竞: ['lol'],
  电子: [],
  测试: ['测试','weq']
};


const GoodsList = () => {


    const data = [
        {
          key: '1',
          sort: 100,
          goodsBigCategory: '体育',
          goodsSmallCategory: '足球',
          goodsName:'7号足球',
          goodsIcon:'',
          specification:'',
          type:'',
          goodsInventory:100,
          inventoryStatus:'正常',
          cost:26,
          price:100,
          goodsRemark:'',
          manage:'',
          
        },
        {
          key: '2',
          sort: 100,
          goodsBigCategory: '体育',
          goodsSmallCategory: '篮球',
          goodsName:'斯伯丁',
          goodsIcon:'',
          specification:'',
          type:'',
          goodsInventory:200,
          inventoryStatus:'正常',
          cost:40,
          price:140,
          goodsRemark:'',
          manage:'',
        },
        {
            key: '3',
            sort: 100,
            goodsBigCategory: '电竞',
            goodsSmallCategory: 'lol',
            goodsName:'王者',
            goodsIcon:'',
            specification:'',
            type:'',
            goodsInventory:99,
            inventoryStatus:'正常',
            cost:50,
            price:170,
            goodsRemark:'',
            manage:'',
            
        },
        {
            key: '4',
            sort: 100,
            goodsBigCategory: '体育',
            goodsSmallCategory: '篮球',
            goodsName:'篮球2',
            goodsIcon:'',
            specification:'',
            type:'',
            goodsInventory:100,
            inventoryStatus:'正常',
            cost:60,
            price:190,
            goodsRemark:'',
            manage:'',
            
        },
        {
            key: '5',
            sort: 100,
            goodsBigCategory: '产品大分类',
            goodsSmallCategory: '子分类',
            goodsName:'系统默认产品',
            goodsIcon:'',
            specification:'ERE',
            type:'IEN340',
            goodsInventory:10001,
            inventoryStatus:'正常',
            cost:500,
            price:900,
            goodsRemark:'',
            manage:'',
            
        },
      ];
      
    const columns = [
        {
          title: '排序',
          dataIndex: 'sort',
          key: 'sort',
          align:'center',
        },
        {
          title: '商品大类',
          dataIndex: 'goodsBigCategory',
          key: 'goodsBigCategory',
          align:'center',
        },
        {
          title: '商品小类',
          dataIndex: 'goodsSmallCategory',
          key: 'goodsSmallCategory',
          align:'center',
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            key: 'goodsName',
            align:'center',
        },
        {
            title: '商品图',
            dataIndex: 'goodsIcon',
            key: 'goodsIcon',
            align:'center',
        },
        {
            title: '规格',
            dataIndex: 'specification',
            key: 'specification',
            align:'center',
        },
        {
            title: '型号',
            dataIndex: 'type',
            key: 'type',
            align:'center',
        },
        {
            title: '商品库存',
            dataIndex: 'goodsInventory',
            key: 'goodsInventory',
            align:'center',
        },
        {
            title: '库存状态',
            dataIndex: 'inventoryStatus',
            key: 'inventoryStatus',
            align:'center',
        },
        {
            title: '成本',
            dataIndex: 'cost',
            key: 'cost',
            align:'center',
        },
        {
            title: '售价',
            dataIndex: 'price',
            key: 'price',
            align:'center',
        },
        {
            title: '商品备注',
            dataIndex: 'goodsRemark',
            key: 'goodsRemark',
            align:'center',
        },
        {
            title: '管理',
            dataIndex: 'manage',
            key: 'manage',
            align:'center',
            render:(text,category)=><Space>
              <FormOutlined style={{cursor:"pointer",color:"#427DD0"}} onClick={()=>showModal(category)}/>
              <DeleteTwoTone twoToneColor="#C00000" style={{cursor:"pointer"}} onClick={()=>showModalDel(category)} />
            </Space>
        },
    ];

    // 新增 Modal 框的数据
    const [addGoods, setAddGoods] = useState();
    
    // 点击修改按钮的功能函数
    const showModal = (category) =>{
        console.log('modify',category.key);
        // console.log(isModalVisible);
        setIsModalVisible(true)
         // 将 点击行的数据 给modal 
        setAddGoods(category)
        // return isModalVisible
    }

    // 点击删除按钮的功能函数
    const showModalDel = (category) =>{
      console.log('del',category.key);
      setIsModalDeleVisible(true)
    }
   
    // select下拉框
    
    const [cities, setCities] = useState(cityData[provinceData[0]]);
    const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);
    
    const handleProvinceChange = value => {
      setCities(cityData[value]);
      setSecondCity(cityData[value][0]);
    };

    const onSecondCityChange = value => {
      setSecondCity(value);
    };

    // 修改 modal框 的数据
    const [isModalVisible,setIsModalVisible]  = useState(false);
  
    const handleOk = () => {
        setIsModalVisible(false)
       };
   
       const handleCancel = () => {
        setIsModalVisible(false)
       };
    
    // 删除 modal框 的数据

    const [isModalDeleVisible, setIsModalDeleVisible] = useState(false);
    // 点击确定
    const handleOkDel = () => {
      setIsModalDeleVisible(false);
    };
    // 点击取消
    const handleCancelDel = () => {
      setIsModalDeleVisible(false);
    };  
    
    // 商品分类 modal 的状态
    const [isCateVisible, setIsCateVisible] = useState(false);

    const handleCateOk = () =>{
      setIsCateVisible(false)
    }

    const handleCateCancel = () =>{
      setIsCateVisible(false)
    }

    // 商品导入 modal 框 的状态
    const [isModalImportsVisible, setIsModalImportVisible] = useState(false);

    const handleImportOk = () => {
      setIsModalImportVisible(false);
    };
  
    const handleImportCancel = () => {
      setIsModalImportVisible(false);
    }


    // 点击新增商品按钮 事件处理函数
    const AddGoods = () =>{
      // 点击显示modal (设 isModalDeleVisible 为 true)
      setIsModalAddVisible(true)
    }
    
    // 点击商品分类按钮 事件处理函数
    const goodsCategory = () =>{
      // 点击显示商品分类模态框 状态设为true
      setIsCateVisible(true)
    }

    // 点击商品导入按钮 事件处理函数
    const ImportGoods = () =>{
      setIsModalImportVisible(true)
    }

    // 新增商品 modal 框的状态值
    const [isModalAddVisible, setIsModalAddVisible] = useState(false);

    const handleAddOk = () =>{
      setIsModalAddVisible(false)
    }

    const handleAddCancel = () =>{
      setIsModalAddVisible(false)
    }

    // 清空多项数据
    const deleteAll = () => {
      console.log("delete all");
    }
    // 分页器 change 事件
    const onChange = (pageNumber) =>{
      console.log('Page: ', pageNumber);
    }

    return (
        <ConfigProvider locale={zhCN}>

           {/* 新增商品模态框 */}
           <ModalApp title='新增商品' visible={isModalAddVisible}  handleOk={handleAddOk} handleCancel={handleAddCancel} />

           {/* 商品分类模态框 */}
           <GoodsCategory title='商品分类' visible={isCateVisible}  handleOk={handleCateOk} handleCancel={handleCateCancel} />

           {/* 商品导入模态框 */}
           <GoodsImport title='商品导入' visible={isModalImportsVisible}  handleOk={handleImportOk} handleCancel={handleImportCancel} />
           
            {/* 修改模态框 */}
           <ModalApp content={addGoods} title='修改商品' visible={isModalVisible}  handleOk={handleOk} handleCancel={handleCancel} />

           {/* 删除模态框 */}
           <DeleteModal visible={isModalDeleVisible}  handleOk={handleOkDel} handleCancel={handleCancelDel} />

            {/* 顶部功能按钮 */}
            <div style={{textAlign:"center",height:"40px",lineHeight:"40px"}}>
                <Space>
                    <Button type="danger">所有商品</Button>
                    <Button type="primary" onClick={()=>goodsCategory()}>商品分类</Button>
                    <Button type="danger" onClick={()=>ImportGoods()}>商品导入</Button>
                    <Button type="primary" onClick={()=>AddGoods()}>新增商品</Button>
                </Space>
            </div>

             {/* 搜索 筛选按钮 */}
            <div style={{textAlign:'center',height:"50px",lineHeight:"50px",background:"#EFF0EF"}}>
                <Space>
                <span style={{userSelect:"none"}}>按分类筛选:</span>
                    <Select defaultValue='请选择' style={{ width: 120 }} onChange={handleProvinceChange}>
                      {provinceData.map(province => (
                        <Option key={province}>{province}</Option>
                      ))}
                    </Select>
                    {
                        secondCity && <Select style={{ width: 120 }} value={secondCity} onChange={onSecondCityChange}>
                        {cities.map(city => (
                        <Option key={city}>{city}</Option>
                        ))}
                        </Select>
                    }
                
                {/* 搜索输入框 */}
                    <span style={{userSelect:"none"}}>商品名称:</span>
                    <Input />
                    <span style={{userSelect:"none"}}>规格:</span>
                    <Input />
                    <span style={{userSelect:"none"}}>型号:</span>
                    <Input />
                        
                {/* 功能按钮 */}
                    <Button type='primary' size='small'>立即搜索</Button>
                    <Button type='danger' size='small'>清空条件</Button>
                </Space>
            </div>

            {/* 表单主题部分 */}
            <Table 
            bordered
            // onRow={(record,index) => {
            //     return {
            //       onClick: () => { console.log(record,index)}, // 点击行
                  
            //     };
            //   }}
            rowSelection={{
                type: "checkbox",
                ...rowSelection,
              }}
            dataSource={data} 
            columns={columns}
            // pagination={false}
            pagination={
                {
                    total:data.length,
                    defaultPageSize:5,
                    pageSizeOptions:[2,5,10],
                    showSizeChanger:true,
                    showQuickJumper:true,
                    showTotal: total=> `总共 ${total}条`,
                    showLessItems:true,
                }
             }
             footer={()=>{
               return(
               <div >
                  <Space>
                  您可以将选中信息<Button icon={<DeleteOutlined />} type='primary' onClick={()=>deleteAll()}>批量删除</Button>
                  </Space>
                  {/* <Pagination 
                  showQuickJumper 
                  showSizeChanger
                  pageSizeOptions={[2,5,10,20]}
                  showTotal={total=> `总共 ${total}条`}
                  defaultCurrent={1} 
                  total={data.length} 
                  onChange={onChange}
                  style={{display:"inline-block"}} /> */}
               </div>
               )
             }}
             />
        </ConfigProvider>
    );
}

export default GoodsList;
